<template>
  <div class="banner">
    <p>
      <span>首页</span>
      <span> / </span>
      <span>数据统计</span>
      <span> / </span>
      <span class="title">用户统计</span>
    </p><br>
    <p class="header">用户统计</p>
  </div>

  <div class="bx">
    <div class="userIdentity">
      <div class="cart1">
        <p>会员用户</p>
        <span>{{memberNum}}</span><br>
        <div class="img">
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
        </div>
        <div class="userPercentage">占比{{userPercentage}}%</div>
      </div>

      <div class="cart1">
        <p>非会员用户</p>
        <span>{{userlist.list.length-memberNum}}</span><br>
        <div class="img">
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
        </div>
        <div class="userPercentage">占比{{100-userPercentage}}%</div>
      </div>
      <div class="cart1">
        <p>男性用户</p>
        <span>{{manNum}}</span><br>
        <div class="img">
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
          <img src="../../assets/u22452.svg" >
        </div>
        <div class="userPercentage">占比{{manPercentage}}%</div>
      </div>
      <div class="cart1">
        <p>女性用户</p>
        <span>{{userlist.list.length-manNum}}</span><br>
        <div class="img">
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
          <img src="../../assets/u22463.svg" >
        </div>
        <div class="userPercentage">占比{{100-manPercentage}}%</div>
      </div>
    </div>
    <div class="distribution">
      <h3>各地区分布</h3>
        <el-table :data="tableData" style="width: 250px;margin-left: 20px;" :cell-style="{'text-align':'center'}">
          <el-table-column prop="region1" label="地区" header-align="center" />
        </el-table>
        <el-table :data="regionlist.list" style="width: 250px;" :cell-style="{'text-align':'center'}">
          <el-table-column prop="r5" label="用户/万" header-align="center" />
        </el-table>
        <el-table :data="tableData" style="width: 250px;" :cell-style="{'text-align':'center'}">
          <el-table-column prop="region2" label="地区" header-align="center" />
        </el-table>
        <el-table :data="regionlist.list" style="width: 250px;" :cell-style="{'text-align':'center'}">
          <el-table-column prop="r6" label="用户/万" header-align="center" />
        </el-table>
        
    </div>
    <div class="agedistribution">
      <h3>年龄分布</h3>
      <div id="main" ref="main"></div>
    </div>
    <div class="sexdistribution">
      <h3>各时间段在线用户</h3>
      <div id="sex" ref="sex"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive,ref } from '@vue/reactivity'
import axios from 'axios'
import { computed, onMounted} from 'vue';
var regionlist=reactive({list:[]})
var userlist=reactive({list:[]})

const tableData = [
  {region1:'北京',region2:'河北'},{region1:'吉林',region2:'浙江'},{region1:'江西',region2:'湖北'},{region1:'海南',region2:'云南'},{region1:'青海',region2:'西藏'},{region1:'上海',region2:'山西'},{region1:'黑龙江',region2:'安徽'},{region1:'山东',region2:'湖南'},{region1:'四川',region2:'陕西'},{region1:'内蒙古',region2:'宁夏'},{region1:'天津',region2:'辽宁'},{region1:'江苏',region2:'福建'},{region1:'河南',region2:'广东'},{region1:'贵州',region2:'甘肃'},{region1:'广西',region2:'新疆'},
]


onMounted(()=>{

  axios.get('/api/region/list').then((res)=>{
    regionlist.list=res.data.list;
  })

  axios.get('/api/user/list').then((res)=>{
    userlist.list = res.data.list;

  var eighteenNum=0;
  var twentyNum=0;
  var thirtyNum=0;
  var fiftyNum=0;
  var otherNum=0;
  var manNum=0;
  var womanNum=0;
  
  for(let i=0;i<userlist.list.length;i++){
    if(userlist.list[i].age<19&&userlist.list[i].age>0){
      eighteenNum++;
    }else if(userlist.list[i].age<24&&userlist.list[i].age>18){
      twentyNum++;
    }else if(userlist.list[i].age<36&&userlist.list[i].age>23){
      thirtyNum++;
    }else if(userlist.list[i].age>=35&&userlist.list[i].age<50){
      fiftyNum++;
    }else{
      otherNum++;
    }}
  
  for(let i=0;i<userlist.list.length;i++){
    if(userlist.list[i].sex){
      manNum++;
    }else{
      womanNum++;
    }
  }
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
      title: {
        text: ''
      },
      tooltip: {},
      xAxis: {
        data: ['0-18', '19-23', '24-35', '35-50', '50以上',]
      },
      yAxis: {},
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [eighteenNum, twentyNum, thirtyNum, fiftyNum, otherNum]
        }
      ]
    });

    var sexChart = echarts.init(document.getElementById('sex'));
    sexChart.setOption({
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['0','2','4','6','8','10','12','14','16','18','20','22','24']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} w'
    },
    axisPointer: {
      snap: true
    }
  },
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        lte: 10,
        color: 'green'
      },
      {
        gt: 10,
        lte: 16,
        color: 'red'
      },
      {
        gt: 16,
        lte: 24,
        color: 'green'
      },
    ]
  },
  series: [
    {
      name: 'Electricity',
      type: 'line',
      smooth: true,
      // prettier-ignore
      data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 300],
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              name: 'peak',
              xAxis: '10'
            },
            {
              xAxis: '16'
            }
          ],
        ]
      }
    }
  ]
    });
  })

})

var memberNum=computed(()=>{
  var num=0;
  for(let i=0;i<userlist.list.length;i++){
    if(userlist.list[i].member){
      num++;
    }
  }
  return num;
})
var manNum=computed(()=>{
  var num=0;
  for(let i=0;i<userlist.list.length;i++){
    if(userlist.list[i].sex){
      num++;
    }
  }
  return num ;
})

var manPercentage=computed(()=>{
  return parseInt((manNum.value/userlist.list.length)*100) ;
})

var userPercentage=computed(()=>{
  return parseInt((memberNum.value/userlist.list.length)*100) ;
} )



</script>

<style scoped>
h3{
  margin: 10px 20px;
}
.banner{
  height: 80px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
  position: absolute;
  top:61px;
  left: 15%;
  padding-top: 20px;
  z-index: 999;
}
.banner p{
  font-size: 12px;
  color: #AAA;
}
.banner .title{
  color: #000;
}
.banner .header{
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
.bx{
  width: 1130px;
  /* background: #fff; */
  margin: auto;
  margin-top: 120px;
}
.bx .userIdentity{
  display: flex;
  justify-content: space-between;
  margin-bottom:40px ;
}
.bx .userIdentity .cart1{
  width: 265px;
  height: 185px;
  background: #fff;
}
.bx .userIdentity .cart1 p{
  font-size: 12px;
  color: #AAA;
  margin: 20px 0 0 24px;
}
.bx .userIdentity .cart1 .img{
  width: 160px;
  display: flex;
  justify-content: space-around;
  margin: 10px 0 20px 24px;
}
.bx .userIdentity .cart1 span{
  font-size: 30px;
  margin: 0 0 20px 24px;
}
.bx .userIdentity .cart1 .userPercentage{
  margin: 0 0 0 24px;
  width: 80%;
  border-top: 1px solid #AAA;
}
.bx .distribution{
  width: 1130px;
  height: 750px;
  margin: auto;
  background: #fff;
  margin-bottom: 40px;
  overflow: hidden;
}
.bx .distribution  .el-table{
  float: left;
}
.el-table__cell{
  padding: 20px 0;
}

.bx .agedistribution{
  width: 1130px;
  height: 500px;
  margin: auto;
  background: #fff;
  margin-bottom: 40px;
  overflow: hidden;
}
#main{
  width: 100%;
  height: 300px;
}
.bx .sexdistribution{
  width: 1130px;
  height: 500px;
  margin: auto;
  background: #fff;
  position: relative;
  overflow: hidden;
}
#sex {
  width: 100%;
  height: 500px;
}
.bx .sexdistribution .man{
  position: absolute;
  right: 200px;
  top: 100px;
}
.bx .sexdistribution .woman{
  position: absolute;
  right: 200px;
  top: 200px;
}
h3{
  margin: 10px 20px;
}
</style>